<template>
  <FilmCarousel
    :items="items"
    :speed="0.9"
    background="black"
    :show-grain="true"
    aspect-ratio="1:1"
    height="300"
    width="100%"
    gap="15px"
  />
</template>

<script setup lang="ts">
import type { FilmCarouselItem } from '@qqxiaobin/film-carousel'

const url =
  'https://java-ai-888.oss-cn-beijing.aliyuncs.com/2025/09/05c567fc-2820-417c-9b60-939d04aa2a8f.jpg'
const items: FilmCarouselItem[] = [
  { id: 1, src: url, overlayText: '大北极熊' },
  { id: 2, src: url, overlayText: '北极熊2' },
  { id: 3, src: url },
  { id: 4, src: url, overlayText: '北极熊4' },
  { id: 5, src: url, overlayText: '北极熊5' },
]
</script>